{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/builder/css/base.css" media="all">
<style>
    .layui-form-item {
        margin-bottom: 15px !important;
        clear: both;
        *zoom: 1;
    }
    .split {
        float: left;
        width: 40%;
    }

    .split2 {
        float: left;
        width: 50%;
    }

    .split_div {
        margin: 10px 0 10px 0;
        display: flex;
        align-items: center;
    }

    .status {
        display: none;
    }

    .split_del {
        margin-left: 5px;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-anim-downbit">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form action="{:url('save')}" class="layui-form fairy-form" id="form">
                <input type="hidden" name="id" value="{$info?$info.id:''}"/>

                <div class="layui-form-item sunSelect" data-url="{:url('ProductCate/getCate')}" data-value="id"
                     data-name="title">
                    <label class="layui-form-label">所属专区</label>
                    <div class="layui-input-inline">
                        <select name="cate_1" data-name="所属专区" lay-verify="required" lay-reqtext="请选择所属专区"
                                data-id="{$info?$info.cate_1:''}" lay-filter="sunSelect"></select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">规格名 </label>
                    <div class="layui-input-block" style="width: 50%">
                        <input type="text" name="key" value="<?php echo isset($info)?$info['key']:'';?>"
                               placeholder="请输入规格名" lay-verify="required" class="layui-input"
                               lay-verify="required"
                               lay-reqtext="请填写规格名"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">规格值</label>

                    <div class="layui-input-block">

                        <a class="layui-btn layui-btn-normal layui-btn-sm" onclick="add_split(1);" href="javascript:;">添加1行</a>
                        <a class="layui-btn layui-btn-normal layui-btn-sm" onclick="add_split(5);" href="javascript:;">添加5行</a>
                        <a class="layui-btn layui-btn-normal layui-btn-sm" onclick="add_split(10);" href="javascript:;">添加10行</a>
                        <a class="layui-btn layui-btn-danger layui-btn-sm clear_split {if empty($item)}status{/if}"
                           onclick="clear_split();"
                           href="javascript:;">清空</a>
                        <div id="split_list">
                            {if !empty($item)}
                            {foreach name="item" item="vo"}
                            <div class="split_div">
                                <input type="hidden" name="item_id[]" value="{$vo.id}"/>
                                <input class="layui-input split" placeholder="请填写规格值" value="{$vo.name}"
                                       name="value[]" lay-verify="required"/>
                                <a class="layui-btn layui-btn-danger layui-btn-sm split_del">删除</a>
                            </div>
                            {/foreach}
                            {/if}
                        </div>
                    </div>
                    {if !empty($item)}
                    <div class="layui-form-mid layui-word-aux" style="margin-left: 110px;color: red!important;">*
                        修改规格值会直接影响到选择该规格的商品，请谨慎修改!
                    </div>
                    {/if}
                </div>
            </form>
        </div>
        <div style="display: none" id="new_split">
            <div class="split_div">
                <input class="layui-input split" placeholder="请填写规格值" name="value[]" lay-verify="required"/>

                <a class="layui-btn layui-btn-danger layui-btn-sm split_del">删除</a>
            </div>
        </div>
    </div>
</div>
<div class="layui-form-item layui-layout-admin">
    <div class="layui-input-block">
        <div class="layui-footer" style="left: 0;">
            <button class="layui-btn" lay-filter="save" lay-submit formObj="#form">保存
            </button>
        </div>
    </div>
</div>
</body>
{include file="public/footer" /}
<script>
    $('#split_list').on('click', '.split_del', function () {
        $(this).parent('.split_div').remove();
        if ($('.split').length <= 1) {
            $(".clear_split").addClass('status');
        }
    })

    function add_split(num) {
        const html = $("#new_split").html();

        for (var i = 1; i <= num; i++) {
            $("#split_list").append(html);
        }
        $(".clear_split").removeClass('status');
        $(".submit_div").show();
        render();
    }

    function clear_split() {
        layer.confirm('将要清空所有规格值，是否继续？', {title: '请确认'}, function (index) {
            layer.close(index);
            $("#split_list").empty();
            $(".clear_split").addClass('status');
            $(".submit_div").hide();
        });

    }

    function render() {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }
</script>
</html>